<template>
    <div class="header" :style="{ backgroundImage: 'url(' + shopObj.avatar + ')' }">
        <div class="header_title">
            <div class="header_left">
                <img :src="shopObj.avatar" />
            </div>
            <div class="header_right">
                <ul>
                    <li> {{ shopObj.name }}</li>
                    <li> {{ shopObj.description }}</li>
                    <li> {{ shopObj.supports[0] }}</li>
                    <li> {{ shopObj.supports[1] }}</li>
                </ul>
            </div>
        </div>
        <div class="notice">
            <ul class="notice_ul" @click="show = true">
                <li class="aa">公告{{ shopObj.bulletin }}</li>
                <li>&gt;</li>
            </ul>
            <van-overlay :show="show" @click="show = false">
                <div class="wrapper">
                    <div class="head">
                        <ul>
                            <li>{{ shopObj.name }}</li>
                            <li>
                                <van-rate v-model="shopObj.deliveryPrice" color="#ffd21e" allow-half />
                            </li>
                            <li>--------优惠信息--------</li>
                        </ul>
                    </div>
                    <div class="gift">
                        <ul>
                            <li>
                                <van-image width="30" height="30"
                                    :src="shopObj.pics[0]" />
                                <span>{{shopObj.supports[0]}}</span>
                            </li>
                            <li>
                                <van-image width="30" height="30"
                                    :src="shopObj.pics[1]" />
                                <span> {{shopObj.supports[1]}}</span>
                            </li>
                            <li>
                                <van-image width="30" height="30"
                                    :src="shopObj.pics[2]" />
                                <span>在线支付满28减5</span>
                            </li>
                            <li>
                                <van-image width="30" height="30"
                                    :src="shopObj.pics[1]" />
                               <span>特价饮品8折抢购</span>
                            </li>
                            <li>
                                <van-image width="30" height="30"
                                    :src="shopObj.pics[0]" />
                                <span>单人特色套餐</span>
                            </li>
                        </ul>
                    </div>
                    <div class="foot">
                        <p>---------商家公告---------</p>
                        <div>{{shopObj.bulletin}}</div>
                    </div>
                </div>
            </van-overlay>


        </div>


    </div>

</template>

<script lang="ts">
import { api_queryShop } from '../../api/shop';
import { defineComponent } from 'vue'
import { shopEntity } from './shop';

export default defineComponent({
    setup() {
        const dataSource = reactive(new shopEntity());
        const query = async () => {
            let rst = await api_queryShop();
            console.log(rst);
            dataSource.shopObj = rst.data;
        }
        onMounted(() => {
            query()
        })
        const show = ref(false);

        return { ...toRefs(dataSource), show }
    }
})
</script>

<style lang="scss" scoped>
.header {
    height: 200px;
    background-repeat: no-repeat;
    background-size: 155%;
    background-origin: center;
    border: 1px solid red;

    .header_title {
        padding: 0 10px;
        width: 100%;
        height: 160px;
        background-color: rgba(3, 0, 0, 0.5);
        display: flex;
        align-items: center;
    }

    .header_left {
        flex: 0 0 120px;
        margin: 0 10px;

        img {
            width: 100%;
        }
    }

    .header_right {
        flex: 1;
        color: white;
        padding-left: 10px;
    }

    .notice {
        height: calc(200px - 160px);
        background-color: rgba(12, 1, 1, 0.8);
        color: white;

        .notice_ul {
            width: 100%;
            display: flex;
            font-size: 10px;
            align-items: center;
            height: 100%;

            .aa {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        }
    }
}

::v-deep(.van-overlay) {
    z-index: 9291878;
    //   pointer-events:none;
}

.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}

.head {
    width: 100%;
    flex: 0 0 170px;

    ul {
        text-align: center;

        li {
            margin-top: 30px;
            margin-bottom: 10px;
        }

        li:nth-child(1) {
            font-size: 20px;
            font-weight: 700;
        }
    }
}

.gift {
    width: 100%;
    flex: 0 0 300px;
    ul>li{
        margin: 20px;
        font-size: 13px;
        display: flex;
        align-items: center;
        span{
            margin-left: 20px;
        }
    }
}
.foot{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    p{
        font-size: 25px;
        margin-bottom: 20px;
    }
    div{
        font-size: 15px;
        margin: 0 20px;
    }
}
</style>